<template>
  <div class="page-container">
    <el-dialog
      title="设备情况"
      :visible="dialogVisible"
      width="80%"
      @open="initData"
      @close="closeDialog"
    >
      <div class="control-container">
        <div class="right-panel overflow-x">
          <div class="search-panel">
            <el-form :inline="true" label-width="100">
              <el-form-item label="设备简称：">
                <el-input v-model="query.shortName" />
              </el-form-item>
              <el-button type="primary" @click="handleSelect">查询</el-button>
            </el-form>
          </div>
          <div class="table-panel">
            <el-table
              v-loading="tableLoading"
              class="grid-data-table"
              height="calc(100vh - 300px)"
              :data="tableData"
            >
              <el-table-column prop="id" label="id" width="80" />
              <el-table-column prop="outletName" label="排口名称" width="120" />
              <el-table-column prop="shortName" label="设备简称" width="120" />
              <!--            <el-table-column prop="equipmentTypeName" label="设备类型" />-->
              <!--            <el-table-column prop="eqmBrand" label="设备品牌" />-->
              <el-table-column prop="eqmModel" label="设备型号" width="120" />
              <el-table-column prop="serviceType" label="合同性质">
                <template slot-scope="scope">{{ getDictLabel('e029', scope.row.serviceType) }}
                </template>
              </el-table-column>
              <el-table-column prop="startTime " label="合同开始时间" width="100">
                <template slot-scope="scope">{{ parseTime(scope.row.startTime,'{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column prop="endTime " label="合同结束时间" width="100">
                <template slot-scope="scope">{{ parseTime(scope.row.endTime,'{y}-{m}-{d}') }}
                </template>
              </el-table-column>
              <el-table-column prop="inspectionCycle" label="巡检周期（天）" />
              <el-table-column prop="calibrationCycle" label="标定/校准周期（天）" />
              <el-table-column prop="maintenanceCycle" label="维护周期（天）" />
              <el-table-column prop="comparisonPeriod" label="实际水样比对周期（天）" />
            </el-table>
            <div class="pagination-container">
              <Pagination
                v-show="query.total>0"
                :total="query.total"
                :page.sync="query.page"
                :limit.sync="query.limit"
                @pagination="initData"
              />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getPage } from '@/api/base/outletEquipment'
import { getDictLabel, parseTime } from '@/utils'
export default {
  name: 'SelectOutletEquipment',
  components: {
    Pagination
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    treeId: {
      type: Number,
      default: null
    },
    treeType: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      isWide: true,
      query: {
        total: 0,
        page: 1,
        limit: 10,
        shortName: '',
        treeId: null,
        treeType: null
      },
      tableData: [],
      tableLoading: false
    }
  },
  created() {
    this.initData()
  },
  mounted() {},
  methods: {
    getDictLabel,
    parseTime,
    initData() {
      this.query.treeType = this.treeType
      this.query.treeId = this.treeId
      this.handleSelect()
    },
    // 查询
    handleSelect() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      getPage(query).then(res => {
        this.tableData = res.data.data.records
        this.query.total = res.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
